<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分类管理</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #F4F6F7;
}

.bigbox {
	width: 1058px;
	height: 496px;
	background-color: #F4F6F7;
	margin-top: 5px;
}

.inbigbox {
	margin-left: 23px;
	margin-right: 15px;
	background-color: white;
	padding-left: 10px;
	padding-right: 10px;
}

.content {
	width: 1000px;
	border: 1px solid #E6E9EA;
}

.content_table {
	text-align: center;
	font-size: 13px;
	font-weight: normal;
}

.content_table th {
	color: #62686A;
	line-height: 30px;
	font-weight: normal;
	background-color: #F4F6F7;
}

.content_table td {
	color: #555;
	line-height: 40px;
	border-top: 1px solid #E9EDED;
}

.inbigbox input {
	border-radius: 5px;
	line-height: 25px;
	border: 1px solid #E6E9EA;
	background-color: #F5F8F9;
}

.inbigbox .inputtype {
	border: none;
	border-radius: 5px;
	line-height: 27px;
	background-color: #11B6B6;
	color: white;
	width: 50px;
}

.inbigbox button {
	border: none;
	border-radius: 5px;
	line-height: 27px;
	background-color: #11B6B6;
	color: white;
	width: 50px;
}

.bottom {
	margin: 15px 340px;
}

.bottom input {
	width: 80px;
	height: 30px;
	margin-right: 50px;
	color: white;
	border: none;
	border-radius: 5px;
	background-color: #11B6B6;
	margin-bottom: 15px;
}

.display_div {
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #000000;
	background: rgba(10, 10, 10, 0.5);
	display: none;
	color: #3A4651;
}
</style>

<script type="text/javascript">
	var update = function(btn) {
		var tr = btn.parentElement.parentElement.parentElement;
		var td = tr.cells[1];
		var txt = document.createElement("input");
		txt.type = "text";
		txt.value = td.innerHTML;
		oldname = txt.value;
		td.innerHTML = "";
		td.appendChild(txt);
	}

	var save = function(btn) {
		var tr = btn.parentElement.parentElement.parentElement;
		var td = tr.cells[1];
		td.innerHTML = td.children[0].value;
		var newvalue = td.innerHTML;
		var id = tr.cells[0].innerHTML;
		if (oldname != newvalue) {
			$.ajax({
				url : "adminAjaxTypes",
				type : "GET",
				data : {
					"newvalue" : newvalue,
					"id":id
				},
				success : function(data) {
					if(data!=null){
						alert(data);
					}
				}
			}); 
		}
	}
</script>
</head>

<body>
	<div class="bigbox">
		<div class="inbigbox">
			<div class="div_title">
				<p style="margin-left: 5px; line-height: 50px; font-size: 18px;">编辑分类</p>
			</div>

			<div class="content">
				<table class="content_table" cellspacing="0">
					<tbody>
						<tr>
							<th style="width: 120px;">序号</th>
							<th style="width: 475px;">分类名称</th>
							<th style="width: 150px;">文章数</th>
							<th style="width: 135px;">路径</th>
							<th style="width: 120px;">修改</th>
							<th style="width: 120px;">保存</th>
						</tr>
						<c:forEach items="${queryAllTypes }" var="types">
							<tr>
								<td>${types.types_id }</td>
								<td>${types.types_name }</td>
								<td>${types.article_typesid }</td>
								<td>${types.types_url }</td>
								<td><a href="javascript:void();"><button type="button"
											onclick="update(this);">修改</button></a></td>
								<td><a href="javascript:void();"><button type="button"
											onclick="save(this);">保存</button></a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>

		</div>

	</div>
</body>

</html>